<template>
  <div class="home">
    <mt-tabbar v-model="selected" fixed @click.native="change">
      <mt-tab-item id="home1">
        <img slot="icon" src="../assets/images/select/base.png" v-if="selected === 'home1'" />
        <img slot="icon" src="../assets/images/icon/base.png" v-else />
        文字小说
      </mt-tab-item>
      <mt-tab-item id="home2">
        <img slot="icon" src="../assets/images/select/study.png" v-if="selected === 'home2'" />
        <img slot="icon" src="../assets/images/icon/study.png" v-else />
        有声读物
      </mt-tab-item>
      <mt-tab-item id="home3">
        <img slot="icon" src="../assets/images/select/knowledgebase.png" v-if="selected === 'home3'" />
        <img slot="icon" src="../assets/images/icon/knowledgebase.png" v-else />
        小说改漫
      </mt-tab-item>
      <mt-tab-item id="home4">
        <img slot="icon" src="../assets/images/select/history.png" v-if="selected === 'home4'" />
        <img slot="icon" src="../assets/images/icon/history.png" v-else />
        播放记录
      </mt-tab-item>
      <mt-tab-item id="home5">
        <img slot="icon" src="../assets/images/select/my.png" v-if="selected === 'home5'" />
        <img slot="icon" src="../assets/images/icon/my.png" v-else />
        我的
      </mt-tab-item>
    </mt-tabbar>
    <mt-tab-container v-model="selected" :style="{ height: $store.state.screenH - 60 + 'px', overflow: 'auto' }">
      <mt-tab-container-item id="home1" v-if="selected === 'home1'">
        <Introduction />
      </mt-tab-container-item>
      <mt-tab-container-item id="home2" v-if="selected === 'home2'">
        <Fxbase />
      </mt-tab-container-item>
      <mt-tab-container-item id="home3" v-if="selected === 'home3'">
        <VideoPlay />
      </mt-tab-container-item>
      <mt-tab-container-item id="home4" v-if="selected === 'home4'">
        <History />
      </mt-tab-container-item>
      <mt-tab-container-item id="home5" v-if="selected === 'home5'">
        <Login />
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import Introduction from '@/components/Introduction.vue'
import Fxbase from '@/components/Fxbase.vue'
import Login from '@/components/Login.vue'
import VideoPlay from '@/components/VideoPlay.vue';
import History from '@/components/History.vue';

export default {
  name: "homeCom",
  data() {
    return {
      selected: this.$store.state.homeIndex,
    };
  },
  methods: {
    change() {
      this.$store.state.homeIndex = this.selected
    }
  },
  components: {
    Introduction,
    Fxbase,
    Login,
    VideoPlay,
    History
  }
};
</script>

<style lang="less" scoped>
div.home {
  height: 100%;


}
</style>
